<template>
  <a-form
    ref="formRef"
    :model="formState"
    :rules="rules"
    @finish="onFinish"
    class="grid grid-cols-3"
    :label-col="{
      span: 4,
    }"
  >
    <a-form-item label="最小值" name="minValue">
      <a-input v-model:value="formState.minValue" />
    </a-form-item>
    <a-form-item label="最大值" name="maxValue">
      <a-input v-model:value="formState.maxValue" />
    </a-form-item>
    <a-form-item class="col-span-3">
      <a-button html-type="submit"> 提交</a-button>
    </a-form-item>
  </a-form>
  <draft-son2 :id="123" :msg="undefined" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Form, InputNumber, Button } from "ant-design-vue";
import { Recordable } from "@/pages/draft/components/types";
import DraftSon2 from "@/pages/draft/components/draftSon2.vue";

const formRef = ref(null);
const formState = ref({
  minValue: null,
  maxValue: null,
});

const rules = {
  minValue: [
    {
      required: true,
      message: "最小值不能为空",
      trigger: "change",
    },
    {
      message: "最小值必须为数字",
      trigger: "change",
      pattern: /^\d+$/,
    },
  ],
  maxValue: [
    {
      required: true,
      message: "最大值不能为空",
      trigger: "change",
    },
  ],
};

const onFinish = (values) => {
  console.log("Success:", values);
};
</script>
